<template>
	<view class="page patient_page">
		<view class="card add_patient" @click="gotoPageURL('/pagesCommon/patient/addPatient')">
			<view class="add_patient_icon">
				<uni-icons type="plusempty" color="#3B6CFE"></uni-icons>
			</view>
			<view class="add_patient_text">
				<view class="text_title">
					添加患者
				</view>
				<view class="text_subtitle">
					以便医生给出更准确的治疗
				</view>
			</view>
			<view class="icon">
				<image src="@/static/icon/patient/hand-love-icon.png" mode="scaleToFill"></image>
			</view>
		</view>
		<view class="patient_list" v-if="list.length">
			<view class="card patient_item" v-for="item in list" :key="item.id" @click="gotoPage(item)">
				<view class="icon" @click.stop="gotoEdit(item)">
					<image src="@/static/icon/patient/edit-icon.png" mode="widthFix"></image>
				</view>
				<view class="patient_item_info">
					<view class="item_avatar">
						<image
							:src="item.avatar || 'https://admin.yuanfenjihua.com/admin-api/infra/file/0/get/7d485f174dd88232f08d5d0ea6d05b153a3857402e3ce776d2c1eca015cad0cb.png'"
							mode="scaleToFill"></image>
					</view>
					<view class="item_info">
						<view class="info_name">
							<view class="name">
								{{item.name || ''}}
							</view>
							<view class="tips blue">
								已实名
							</view>
						</view>
						<view class="info_other">
							<view>
								{{item.sex == 1?'男':'女' || '男'}}
							</view>
							<view>
								{{$IdCard(item.idCard,3) || 0}}岁
							</view>
							<view>
								{{item.idCard || 0}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no_thing" v-else>
			<image class="placeholder" src="@/static/images/noting.png" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		queryPatientInfoList
	} from '@/api/index.js'
	import {
		getUserInfo
	} from '@/utils/auth.js'

	export default {
		data() {
			return {
				list: [],
				total: 0,
				formPage: '',
				outpatientInfoCreate: {}
			}
		},
		onLoad(options) {
			this.formPage = options.formPage
			if (options.outpatientInfoCreate) {
				this.outpatientInfoCreate = JSON.parse(options.outpatientInfoCreate)
			}
		},
		onShow() {
			this.queryPatientInfoList()
		},
		methods: {
			gotoPageURL(url) {
				uni.navigateTo({
					url
				})
			},
			gotoEdit(item) {
				uni.navigateTo({
					url: `/pagesCommon/patient/addPatient?type=edit&item=${JSON.stringify(item)}`
				})
			},
			gotoPage(item) {
				let patient = {
					patientId: item.id,
					name: item.name,
					age: item.age,
					height: item.height,
					weight: item.weight
				}
				let outpatientInfoCreate = {
					...this.outpatientInfoCreate,
					...patient
				}
				if (this.formPage == 'mine') return
				if (this.formPage == 'addRenewal') {
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 2];
					prevPage.$vm.patient = patient
					prevPage.$vm.form.patientId = patient.patientId
					uni.navigateBack(); //返回上一页
					return
				}
				uni.navigateTo({
					url: `/pagesCommon/consultation/addConsultation?outpatientInfoCreate=${JSON.stringify(outpatientInfoCreate)}`
				})
			},
			queryPatientInfoList() {
				queryPatientInfoList({
					"OpenId": getUserInfo().openId,
					"userid": getUserInfo().id
				}).then(res => {
					this.list = res.data.list
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.patient_page {
		background-color: #fafafa;

		.add_patient {
			position: relative;
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 40rpx 20rpx;
			background-color: #E1E8FA;

			.add_patient_icon {
				width: 90rpx;
				height: 90rpx;
				text-align: center;
				line-height: 90rpx;
				text-align: center;
				border: 1px dashed #3B6CFE;
				border-radius: 100%;
			}

			.add_patient_text {
				margin-left: 20rpx;

				.text_title {
					font-weight: bold;
					font-size: 32rpx;
					color: #3B6CFE;
				}

				.text_subtitle {
					margin-top: 20rpx;
					font-size: 22rpx;
					color: #3B6CFE;
				}
			}

			.icon {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 160rpx;
				height: 130rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.patient_list {
			.patient_item {
				margin-bottom: 30rpx;
				position: relative;
				padding: 40rpx 20px;

				.icon {
					position: absolute;
					top: 20rpx;
					right: 20rpx;

					width: 30rpx;
					height: 30rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.patient_item_info {
					display: flex;
					align-items: center;

					.item_avatar {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item_info {
						margin-left: 20rpx;
						font-size: 22rpx;
						color: #999999;

						.info_name,
						.info_other {
							display: flex;
							align-items: center;

							&>view {
								margin-right: 10rpx;

								&:last-child {
									margin: 0;
								}
							}
						}

						.info_name {
							margin-bottom: 20rpx;

							.name {
								font-weight: bold;
								font-size: 32rpx;
								color: #333333;
							}

							.tips {
								padding: 6rpx 10rpx;
								border-radius: 10rpx;
								font-size: 22rpx;
								margin-left: 20rpx;

								&.blue {
									color: #3B6CFE;
									background-color: #F3F8FF;
								}

								&.gray {
									color: #999;
									background-color: #f5f5f5;
								}
							}
						}
					}
				}
			}
		}
	}
</style>